<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item label="选择课程" :labelCol="{span: 5}" :wrapperCol="{span: 16}">
      <a-select
        v-decorator="['courseId', {rules: [{required: true, message: '请选择课程'}]}]"
        placeholder="请选择需要停课的课程"
        @change="handleCourseChange"
      >
        <a-select-option v-for="course in courseList" :key="course.id" :value="course.id">
          {{ course.name }} ({{ course.time }} {{ course.room }})
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="原安排" :labelCol="{span: 5}" :wrapperCol="{span: 16}">
      <div v-if="selectedCourse">
        <p>时间: {{ selectedCourse.time }}</p>
        <p>教室: {{ selectedCourse.room }}</p>
        <p>班级: {{ selectedCourse.classes.join(', ') }}</p>
      </div>
      <div v-else>请先选择课程</div>
    </a-form-item>

    <a-form-item label="停课范围" :labelCol="{span: 5}" :wrapperCol="{span: 16}">
      <a-radio-group v-decorator="['suspendScope', {initialValue: 'single'}]">
        <a-radio value="single">单次课</a-radio>
        <a-radio value="multiple">多次课</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item 
      label="停课日期" 
      :labelCol="{span: 5}" 
      :wrapperCol="{span: 16}"
      v-if="form.getFieldValue('suspendScope') === 'multiple'"
    >
      <a-range-picker
        v-decorator="['suspendDateRange', {rules: [{required: form.getFieldValue('suspendScope') === 'multiple', message: '请选择日期范围'}]}]"
      />
    </a-form-item>

    <a-form-item label="停课原因" :labelCol="{span: 5}" :wrapperCol="{span: 16}">
      <a-cascader
        v-decorator="['reason', {rules: [{required: true, message: '请选择停课原因'}]}]"
        :options="reasonOptions"
        placeholder="请选择停课原因"
      />
    </a-form-item>

    <a-form-item label="详细说明" :labelCol="{span: 5}" :wrapperCol="{span: 16}">
      <a-textarea
        v-decorator="['description', {rules: [{required: true, message: '请输入详细说明'}]}]"
        placeholder="请详细说明停课原因"
        :rows="4"
      />
    </a-form-item>

    <a-form-item label="附件" :labelCol="{span: 5}" :wrapperCol="{span: 16}" v-if="needAttachment">
      <a-upload
        v-decorator="['attachment', {rules: [{required: needAttachment, message: '请上传附件'}]}]"
        :beforeUpload="beforeUpload"
        :fileList="fileList"
      >
        <a-button> <a-icon type="upload" /> 上传文件 </a-button>
      </a-upload>
    </a-form-item>

    <a-form-item :wrapperCol="{span: 16, offset: 5}">
      <a-button type="primary" html-type="submit">提交申请</a-button>
      <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      courseList: [
        { id: '1', name: '高等数学（上）	', time: '周一 1-2节', room: 'bj007', classes: ['数学2101', '数学2102'] },
        { id: '2', name: 'PLC与工业控制技术', time: '周二 3-4节', room: 'B205', classes: ['英语2101', '英语2102'] },
        { id: '3', name: '数据结构', time: '周三 5-6节', room: 'C302', classes: ['计算机2101'] }
      ],
      selectedCourse: null,
      reasonOptions: [
        {
          value: 'teacher',
          label: '教师原因',
          children: [
            { value: 'sick', label: '病假', needAttachment: true },
            { value: 'personal', label: '事假', needAttachment: true }
          ]
        },
        {
          value: 'school',
          label: '学校原因',
          children: [
            { value: 'activity', label: '学校活动', needAttachment: false },
            { value: 'holiday', label: '节假日调整', needAttachment: false }
          ]
        }
      ],
      fileList: [],
      needAttachment: false
    }
  },
  methods: {
    handleCourseChange(value) {
      this.selectedCourse = this.courseList.find(course => course.id === value)
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('停课申请表单值: ', values)
          this.$emit('submit', {
            ...values,
            course: this.selectedCourse
          })
          this.form.resetFields()
          this.selectedCourse = null
          this.fileList = []
        }
      })
    },
    handleReset() {
      this.form.resetFields()
      this.selectedCourse = null
      this.fileList = []
    }
  },
  watch: {
    'form.getFieldValue("reason)': function(val) {
      if (val && val.length > 0) {
        const reasonType = val[0]
        const reason = this.reasonOptions
          .find(opt => opt.value === reasonType)
          ?.children?.find(child => child.value === val[1])
        this.needAttachment = reason?.needAttachment || false
      } else {
        this.needAttachment = false
      }
    }
  }
}
</script>